<template>
	<view class="header">
		<view class="header_bg"></view>
		<view class="header_temperature">28</view>
		<view class="header_box">
			<view class="header_box_user" @click="isLogin(user.isLogin)">
				<view class="header_box_user_username">
					Hi, {{user.nickname}}
				</view>
				<view class="header_box_user_welcome">
					{{user.welcome}}
				</view>
			</view>

			<view class="header_box_nav">
				<view class="header_box_nav_item">
					<rui-icons icon="message" size="46"></rui-icons>
					<!-- <view class="header_box_nav_item_num">
						21
					</view> -->
				</view>
				<view class="header_box_nav_item" @click="$rui.route('/pages/bluetooth/scan/scan')">
					<rui-icons icon="add-full" size="50"></rui-icons>
				</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	
	import {
		userStore
	} from "@/store/index.js"
	let user = userStore();
	
	const isLogin = (status) => {
		if(status) return false;
		uni.$rui.route('/pages/user/login/login')
	}
	
</script>

<style lang="scss" scoped>
	.header {
		padding: 80rpx 30rpx 30rpx;
		position: relative;

		&_box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&_nav {
				display: flex;

				&_item {
					padding: 0 20rpx;
					position: relative;

					&_num {
						position: absolute;
						top: -5rpx;
						right: 0;
						width: 30rpx;
						height: 30rpx;
						background: #f00;
						color: #fff;
						border-radius: 50%;
						font-size: 20rpx;
						text-align: center;
						line-height: 30rpx;
					}
				}
			}

			&_user {
				&_welcome {
					color: #999;
					font-size: 28rpx;
				}

				&_username {
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}



		&_temperature {
			font-size: 66rpx;
			line-height: 50rpx;
			font-weight: bold;
			margin: 30rpx 0;
			color: var(--color);

			&::after {
				content: "℃";
				font-size: 32rpx;
			}
		}

		&_bg {
			&::before {
				content: "";
				display: block;
				height: 400rpx;
				width: 200rpx;
				background: var(--color);
				border-radius: 50%;
				filter: blur(150rpx);
				position: absolute;
				transform: rotate(30deg);
				top: 0;
				left: -250rpx;
				z-index: -1;
			}

			&::after {
				content: "";
				display: block;
				height: 100rpx;
				width: 300rpx;
				background: var(--color);
				border-radius: 50%;
				filter: blur(80rpx);
				position: absolute;
				top: 300rpx;
				right: -250rpx;
				z-index: -1;
			}
		}
	}
</style>